<template>
  <!-- default-value="list"默认显示第一个  <n-tab-pane name="list" tab="文章列表">和这个对应-->
  <n-tabs v-model:value="tabValue" justify-content="start" type="line">
    <n-tab-pane name="list" tab="文章列表">
      <div v-for="(blog, index) in blogListInfo" style="margin-bottom: 15px;">
        <!-- 卡片插槽案例 -->
        <n-card :title="blog.title">
          {{ blog.content }}
          <template #footer>
            <n-space align="center">
              <div>发布时间: {{ blog.create_time }}</div>
              <n-button @click="toUpdate(blog)">修改</n-button>
              <n-button @click="toDelete(blog)">删除</n-button>
            </n-space>
          </template>
        </n-card>
      </div>

      <n-space>
        <div v-for="pageNum in pageInfo.pageCount" @click="toPage(pageNum)">
          <div :style="'color:' + (pageNum == pageInfo.page ? 'green' : '')" style="cursor: pointer;">
            {{ pageNum }}
          </div>

        </div>
      </n-space>
    </n-tab-pane>

    <n-tab-pane name="add" tab="添加文章">
      <n-form>
        <n-form-item label="标题">
          <n-input v-model:value="addArticle.title" placeholder="请输入标题" />
        </n-form-item>
        <n-form-item label="分类">
          <n-select v-model:value="addArticle.category_id" :options="categoryOptions" placeholder="请选择分类" />
        </n-form-item>
        <n-form-item label="内容">
          <RichTextEditor v-model="addArticle.content"></RichTextEditor>
        </n-form-item>
        <n-form-item label="">
          <n-button @click="add">提交</n-button>
        </n-form-item>
      </n-form>
    </n-tab-pane>

    <n-tab-pane name="update" tab="修改">
      <n-form>
        <n-form-item label="标题">
          <n-input v-model:value="updateArticle.title" placeholder="请输入标题" />
        </n-form-item>
        <n-form-item label="分类">
          <n-select v-model:value="updateArticle.category_id" :options="categoryOptions" placeholder="请选择分类" />
        </n-form-item>
        <n-form-item label="内容">
          <RichTextEditor v-model="updateArticle.content"></RichTextEditor>
        </n-form-item>
        <n-form-item label="">
          <n-button @click="update">提交</n-button>
        </n-form-item>
      </n-form>
    </n-tab-pane>
  </n-tabs>
</template>
<script setup>
import { AdminStore } from '../../stores/AdminStore'
import { ref, reactive, inject, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import RichTextEditor from '../../components/RichTextEditor.vue'

const router = useRouter()
const route = useRoute()

const message = inject("message")
const dialog = inject("dialog")
const axios = inject("axios")

const adminStore = AdminStore()

//定义变量
let addArticle = reactive({
  category_id: null,
  title: '',
  content: ''
})

let updateArticle = reactive({
  id: 0,
  category_id: '',
  title: '',
  content: ''
})

const categoryOptions = ref([])
const blogListInfo = ref([])
const tabValue = ref("list")

const pageInfo = reactive({
  page: 1,
  pageSize: 3,
  pageCount: 0,
  count: 0
})

onMounted(() => {
  loadCategorys(),
    loadBlogs()
})

const loadCategorys = async () => {
  let res = await axios.get("/category/list")
  categoryOptions.value = res.data.rows.map((item) => {
    return {//因为Options需要的格式也是这个
      label: item.name,
      value: item.id
    }
  })
}

const add = async () => {
  let { data } = await axios.post("/blog/_token/add", addArticle)
  if (data.code == 200) {
    message.info(data.msg)//添加成功
    addArticle.category_id = ""
    addArticle.content = ""
    addArticle.title = ""
    tabValue.value = "list"
    loadBlogs()
  } else {
    message.error(data.msg)//添加失败
  }
}

const loadBlogs = async () => {
  let { data } = await axios.get(`/blog/search?page=${pageInfo.page}&pageSize=${pageInfo.pageSize}`)
  let tem_rows = data.data.rows
  for (let rows of tem_rows) {
    rows.content += "..."
    let date = new Date(rows.create_time)
    rows.create_time = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 `
  }
  blogListInfo.value = tem_rows
  pageInfo.count = data.data.count
  pageInfo.pageCount = parseInt(pageInfo.count / pageInfo.pageSize) + (pageInfo.count % pageInfo.pageSize > 0 ? 1 : 0)

}

const toPage = async (pageNum) => {
  pageInfo.page = pageNum
  loadBlogs()
}

const toUpdate = async (blog) => {
  tabValue.value = "update"
  let res = await axios.get("/blog/detail?id=" + blog.id)
  updateArticle.id = res.data.rows[0].id
  updateArticle.category_id = res.data.rows[0].category_id
  updateArticle.title = res.data.rows[0].title
  updateArticle.content = res.data.rows[0].content
}


const update = async () => {
  let { data } = await axios.put("/blog/_token/update", updateArticle)
  if (data.code == 200) {
    message.info(data.msg)//更新成功
    loadBlogs()
    addArticle.category_id = ""
    addArticle.content = ""
    addArticle.title = ""
    tabValue.value = "list"
  } else {
    message.error(data.msg)//更新失败
  }
}

const toDelete = (blog) => {
  dialog.warning({
    title: '警告',
    content: '是否要删除',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      let { data } = await axios.delete("/blog/_token/delete?id=" + blog.id)
      if (data.code == 200) {
        message.info(data.msg)//删除成功
        loadBlogs()
      } else {
        message.error(data.msg)//删除失败
      }
    },
    onNegativeClick: () => { }
  })
}
</script>
<style scoped lang='scss'></style>
